<script setup lang="ts">
import { ref } from 'vue';

type pickerItemType = {
  label: string;
  code: string;
}

const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
})
const isShow = ref(false);
console.log('props.columns', props.columns[0]);
const currentItem = ref<pickerItemType>(props.columns[0] as pickerItemType || { label: '全部空间', code: 'all' });

const emit = defineEmits([
  'confirm',
]);

const pickerConfirmHandler = (target: any) => {
  const item = target.value[0];
  console.log('pickerConfirmHandler', target);
  currentItem.value = {
    label: item.label,
    code: item.code,
  }
  emit('confirm', item)
  isShow.value = false;
}

</script>

<template>
  <up-button @click="isShow = true" type="primary">{{ currentItem.label }}</up-button>
  <up-picker
    :show="isShow" 
    :columns="[columns]" 
    keyName="label"
    confirmColor="#d54448"
    @cancel="isShow = false"
    @confirm="pickerConfirmHandler"
  ></up-picker>
</template>
